<template>
  <div>
    <el-dialog title="添加默认值" v-model="open" width="850px" :close-on-click-modal="false" :modal-append-to-body="false" @open="onOpen" @close="onClose">
      <el-form ref="treeNodeForm" :model="formData" label-width="100px" :inline="true">
        <el-form-item label="标题" prop="name">
          <el-input v-model.trim="formData.name" placeholder="请输入标题" clearable @keyup.enter.native="handleQuery" style="width: 200px" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table ref="singleTable" v-loading="dataList.loading" :data="dataList.list" border @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column type="index" width="95" label="序号" align="center" />
        <el-table-column label="控件名称" align="center" prop="fieldName" />
        <el-table-column label="字段" align="center" prop="fieldValue" />
        <el-table-column label="角色名称" align="center" prop="roleName" v-if="sign" />
        <el-table-column label="姓名" align="center" prop="nickName" v-if="sign" />
      </el-table>
      <!-- 分页组件 -->
      <pagination v-show="dataList.total > 0" :total="dataList.total" v-model:page="formData.pageNum" v-model:limit="formData.pageSize" @pagination="getList" />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handelConfirm">确 定</el-button>
          <el-button @click="onClose">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { getTitleList } from "@/api/flowInfo/info.js";
const { proxy } = getCurrentInstance();
const props = defineProps({
  sign: {
    type: Boolean,
    default: false,
  },
});

const open = defineModel();
const emit = defineEmits(["confirm"]);

const formData = ref({
  name: undefined,
  pageNum: 1,
  pageSize: 10,
});

const treeNodeForm = ref();

function onOpen() {
  formData.value = {
    name: undefined,
    pageNum: 1,
    pageSize: 10,
    isSignature: 0,
  };
  if (props.sign) {
    formData.value.isSignature = 1;
  }
  getList();
}

function onClose() {
  open.value = false;
}

function handelConfirm() {
  if (!selectParameter.value.length) {
    proxy.$modal.msgWarning("请选择默认值");
    return;
  }
  emit("commit", selectParameter.value[0]);
  onClose();
}

/** 搜索按钮操作 */
function handleQuery() {
  formData.value.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryForm");
  handleQuery();
}
const dataList = reactive({
  loading: false,
  dataList: [],
  total: 0,
});
/** 查询列表 */
function getList() {
  dataList.loading = true;
  getTitleList(formData.value)
    .then((response) => {
      dataList.list = response.rows;
      dataList.total = response.total;
    })
    .finally(() => {
      dataList.loading = false;
    });
}

const singleTable = ref(null);
const selectParameter = ref([]);
function handleSelectionChange(selection) {
  selectParameter.value = selection;

  if (selection.length > 1) {
    // 如果选中了多个，只保留最后一个选中的项
    const lastSelection = selection[selection.length - 1];
    selectParameter.value = lastSelection;
    singleTable.value.clearSelection();
    singleTable.value.toggleRowSelection(lastSelection);
  }
}
</script>
